import React, { useEffect, useState, Key } from "react";
import { Button, Card, Form, Input, message, Table, Tooltip } from "antd";
import {
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import style from "./index.module.css";
import {
  batchDeleteHospitalRequest,
  deleteHospitalRequest,
  getHospitalSetListRequire,
} from "@/api/hospital/hospitalSet";
import {
  getHospitalSetListRecordItemType,
  getHospitalSetListRecordType,
} from "@/api/hospital/model/hospitalSetType";
import { selectHospitalListParams } from "./indexType";
import { useNavigate } from "react-router-dom";

export default function HospitalSet() {
  const [getHospitalData, setGetHospitalData] =
    useState<getHospitalSetListRecordType>([]);

  //总数total: 10,
  const [total, setTotal] = useState(0);
  // 当前页数current: 1,
  const [current, setCurrent] = useState(1);
  // 每页条数pageSize: 5,
  const [pageSize, setPageSize] = useState(5);
  //是否加载完成
  const [isLoading, setIsLoading] = useState(false);
  //获取{hosname 和 hoscode}
  const [fileValue, setFileValue] = useState({});
  const navigate = useNavigate();
  //重新渲染页面
  const [reRender, setReRender] = useState(true);
  //批量删除
  const [btchDelete, setBtchDelete] = useState<Key[]>([]);
  //设置批量删除按钮的禁用和解除
  const [isSelect, setIsSelect] = useState(true);

  useEffect(() => {
    setIsLoading(true);
    const getHospitalSetList = async () => {
      const result = await getHospitalSetListRequire({
        page: current, //当前页数
        limit: pageSize, //每页条数
        ...fileValue,
      });
      setGetHospitalData(result.records);

      setTotal(result.total);
      setIsLoading(false);
    };
    getHospitalSetList();
  }, [current, pageSize, fileValue, reRender]);

  const pageChangeHandle = (current: number, pageSize: number) => {
    setCurrent(current);
    setPageSize(pageSize);
  };

  const selectHospitalList = (value: selectHospitalListParams) => {
    // console.log(value);
    setFileValue(value);
  };

  const addHospitalListHandle = () => {
    navigate("/syt/hospital/hospitaladd");
  };

  // 删除单个医院
  const deleteHospitalHandle = (id: number) => {
    return async () => {
      await deleteHospitalRequest(id);

      message.success("删除成功!");
      setReRender(!reRender);
    };
  };

  //删除全部数据
  const batchDeleteHosListHandle = async () => {
    await batchDeleteHospitalRequest(btchDelete);
    message.success("批量删除成功!");
    setReRender(!reRender);
  };

  const columns = [
    {
      title: "序号",
      with: 60,
      dataIndex: "index",
      render(_: any, __: any, c: any) {
        return c + 1;
      },
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
    },
    {
      title: "api基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
    },
    {
      title: "联系人电话",
      dataIndex: "contactsPhone",
    },
    {
      title: "操作",
      dataIndex: "do",
      fixed: "right" as "right",
      with: 200,
      render(_: any, data: getHospitalSetListRecordItemType) {
        // console.log(data.id);
        const { id } = data;
        // console.log(id);

        return (
          <div>
            <Tooltip title="编辑信息">
              <Button
                type="primary"
                className={style.doButtonLeft}
                icon={<EditOutlined />}
                onClick={() => {
                  navigate(`/syt/hospital/hospitalupdate/${id}`);
                }}
              ></Button>
            </Tooltip>
            <Tooltip title="删除信息">
              <Button
                type="primary"
                onClick={deleteHospitalHandle(id)}
                danger
                icon={<DeleteOutlined />}
              ></Button>
            </Tooltip>
          </div>
        );
      },
    },
  ];

  return (
    <div className={style.hosSetOuter}>
      <Card>
        <Form name="select" layout="inline" onFinish={selectHospitalList}>
          <Form.Item name="hosname">
            <Input placeholder="医院名称" />
          </Form.Item>
          <Form.Item name="hoscode">
            <Input placeholder="医院编号" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type="default" htmlType="reset">
              清空
            </Button>
          </Form.Item>
        </Form>
        <Form name="select" layout="inline" className={style.addList}>
          <Form.Item>
            <Button
              type="primary"
              onClick={addHospitalListHandle}
              htmlType="submit"
            >
              添加
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              onClick={batchDeleteHosListHandle}
              danger
              disabled={isSelect}
            >
              全部删除
            </Button>
          </Form.Item>
        </Form>
        <Table
          columns={columns}
          dataSource={getHospitalData}
          rowKey="id"
          scroll={{ x: 1200 }}
          bordered
          pagination={{
            //总页数
            total,
            // 当前页数
            current,
            // 每页条数
            pageSize,
            // pageSizeOptions指定每页可以显示多少条
            pageSizeOptions: [5, 15, 20],
            // 是否展示 pageSize 切换器
            showSizeChanger: true,
            // 是否可以快速跳转至某页
            showQuickJumper: true,
            // 用于显示数据总量和当前数据顺序
            showTotal(total) {
              return `总共 ${total} 条 `;
            },
            onChange: pageChangeHandle,
            //页面是否加载中
          }}
          loading={isLoading}
          rowSelection={{
            onChange(ids: Key[]) {
              setBtchDelete(ids);
              setIsSelect(!ids.length);
            },
          }}
        />
        ;
      </Card>
    </div>
  );
}
